<template>
    <div class="tab-root">
        <router-link class="tab-item" to="/home">
            <img :src="highLighted==0?'/img/find-h.png':'/img/find.png'">
        </router-link>
        <router-link class="tab-item" to="/borrow">
            <img :src="highLighted==1?'/img/borrow-h.png':'/img/borrow.png'">
        </router-link>
        <router-link class="tab-item" to="/community/comone/comtwo">
            <img :src="highLighted==2?'/img/community-h.png':'/img/community.png'">
        </router-link>
        <router-link class="tab-item" to="/news">
            <img :src="highLighted==3?'/img/news-h.png':'/img/news.png'">
        </router-link>
        <router-link class="tab-item" to="/home/mine/my">
            <img :src="highLighted==4?'/img/mine-h.png':'/img/mine.png'">
        </router-link>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                highLighted:null
            }
        },
        watch:{
            $route(n,o){
                if(n.path.indexOf("home")!=-1){
                    this.highLighted = "0";
                }else if(n.path.indexOf("borrow")!=-1){
                    this.highLighted = "1";
                }else if(n.path.indexOf("community")!=-1){
                    this.highLighted = "2";
                }else if(n.path.indexOf("news")!=-1){
                    this.highLighted = "3";
                }else if(n.path.indexOf("mine")!=-1){
                    this.highLighted = "4";
                }
            }
        },
        mounted(){
            if(this.$route.path.split("/")[1]=="community"){
                this.highLighted = 2;
            }
        }
    }
</script>

<style scoped lang="less">
    .tab-root{
        border-top: 1px solid #ccc;
        display: flex;
        height: @s98;
    }
    .tab-item{
        display: inline-block;
        width: 20%;
        height: @s98;
        text-align: center;
        img{
            width: 6.1vw;
            margin-top: 5%;
        }
    }
</style>